'use strict';
import React, { useState, useEffect, useRef } from 'react';
import { Button, Table, Form, Input, message, Divider } from 'antd';
import {
  AppstoreFilled,
  PlusOutlined,
} from '@ant-design/icons';
import Gmodal from '@/component/modal'
import { layout } from '../conf'
import styles from './index.less'

/*
* 组件注释
* create by wuqiong
* creation time 2022/04/22
* 消息与信号
* */

const Index = (props) => {
  const [signalList, setSignalList] = useState([]);
  const [messageList, setMessageList] = useState([]);
  const [modelVisible, setModelVisible] = useState(false);
  const [modelType, setModelType] = useState("");
  const [signalIdMap, setSignalIdMap] = useState([]);
  const [messageIdMap, setMessageIdMap] = useState([]);

  const [form] = Form.useForm();

  const modelConfig = () => {
    if (modelType === "message") {
      return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
    } else {
      return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
    }
  }

  const initDataList = () => {
    const rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;

    let _messageIdMap = {};
    let _signalIdMap = {};
    let _messageList = [];
    let _signalList = [];
    rootElements.forEach(el => {
      if (el.$type === "bpmn:Message") {
        _messageIdMap[el.id] = true;
        _messageList.push({ ...el });
      }
      if (el.$type === "bpmn:Signal") {
        _signalIdMap[el.id] = true;
        _signalList.push({ ...el })
      }
    });

    setSignalList(_signalList)
    setMessageList(_messageList)
    setSignalIdMap(_signalIdMap)
    setMessageIdMap(_messageIdMap)
  }
  const openModel = (type) => {
    setModelType(type);
    setModelVisible(true)
  }
  const addNewObject = () => {
    let modelObjectForm = form.getFieldsValue();
    let type = "bpmn:Message";
    if (modelType === "message") {
      if (messageIdMap[modelObjectForm.id]) {
        return message.error("该消息已存在，请修改id后重新保存");
      }
    } else {
      if (signalIdMap[modelObjectForm.id]) {
        return message.error("该信号已存在，请修改id后重新保存");
      }
      type = "bpmn:Signal"
    }
    const nodeRef = window.bpmnInstances.moddle.create(type, modelObjectForm);

    window.bpmnInstances.modeler.getDefinitions().rootElements.push(nodeRef)
    setModelVisible(false)
    initDataList();
  }

  useEffect(() => initDataList(), [])

  const columns = [
    {
      title: "序号",
      width: "50px",
      render: (_, __, index) => index + 1,
    },
    {
      title: "消息ID",
      dataIndex: "id",
      ellipsis: true,
    },
    {
      title: "消息名称",
      dataIndex: "name",
      ellipsis: true,
    },
  ];


  return <div className={styles.signalAndMassage}>
    <div className={styles.content}>
      <span><AppstoreFilled className={styles.icon} />消息列表</span>
      <Button onClick={() => openModel('message')} icon={<PlusOutlined />} className='bpmn_btn' size="small" type="primary">创建新消息</Button>
    </div>
    <Table
      size='small' bordered
      columns={columns}
      pagination={false}
      rowKey={"id"}
      dataSource={messageList} />
    <Divider style={{ margin: "8px 0" }} />
    <div className={styles.content}>
      <span><AppstoreFilled className={styles.icon} />信号列表</span>
      <Button onClick={() => openModel('signal')} icon={<PlusOutlined />} className='bpmn_btn' size="small" type="primary">创建新信号</Button>
    </div>
    <Table
      size='small' bordered
      rowKey={"id"}
      columns={columns}
      pagination={false}
      dataSource={signalList} />

    <Gmodal
      title={modelConfig().title}
      visible={modelVisible} width={500}
      handleOk={() => addNewObject()}
      bodyStyle={{
        minHeight: "auto",
        height: 114,
        paddingBottom: 10,
      }}
      handleCancel={() => setModelVisible(false)} >
      <Form {...layout} form={form} name="control-hooks" preserve={false}>
        <Form.Item name="id" label={modelConfig().idLabel} style={{ marginBottom: 10 }}>
          <Input allowClear />
        </Form.Item>
        <Form.Item name="name" label={modelConfig().nameLabel} style={{ marginBottom: 10 }}>
          <Input allowClear />
        </Form.Item>

      </Form>
    </Gmodal>
  </div>
};
export default Index;